<template>
  <el-table :data="classList" style="width: 100%">
    <el-table-column fixed prop="xh" label="序号" width="150" />
    <el-table-column prop="name" label="课程名称" width="120" />
    <el-table-column prop="time" label="创建时间" width="120" />
    <el-table-column label="可见状态" width="100">
      <template>
        <el-switch v-model="value1" />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="">
        <el-button type="" icon="el-icon-edit" ></el-button>
        <el-button type="" icon="el-icon-files" ></el-button>
        <el-button type="" icon="el-icon-monitor" ></el-button>
        <el-button type="" icon="el-icon-school"></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'CourseList',
  data () {
    return {
      value1: false,
      value2: true,
      value3: true,
      value4: false,
      classList:
        [
          {
            xh: '1',
            name: 'Java程序设计',
            time: '2020-12-12'

          },
          {
            xh: '2',
            name: 'MySQL数据库技术',
            time: '2021-12-11'

          },
          {
            xh: '3',
            name: 'web前端开发基础',
            time: '2021-12-11'

          },
          {
            xh: 4,
            name: 'Web前端项目开发实战',
            time: '2021-12-11'

          }
        ]
    }
  }
}
</script>

<style scoped>

</style>
